<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>PyTv! - Beta Version</title>
		<link type="text/css" href="../static/css/{{theme}}/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
		<link type="text/css" href="../static/css/{{layout}}" rel="stylesheet" />	
		<link rel="stylesheet" type="text/css" href="../static/css/jquery.jgrowl.css"/>
		<script type="text/javascript" src="../static/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="../static/js/jquery-ui-1.8.1.custom.min.js"></script>
		<script type="text/javascript" src="../static/js/jquery.jgrowl.js"></script>
        <script type="text/javascript" src="../static/js/actions.js"></script>
        
        <script type="text/javascript">
            if( !window.XMLHttpRequest ) XMLHttpRequest = function()
            {
              try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0") }catch(e){}
              try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0") }catch(e){}
              try{ return new ActiveXObject("Msxml2.XMLHTTP") }catch(e){}
              try{ return new ActiveXObject("Microsoft.XMLHTTP") }catch(e){}
              throw new Error("Could not find an XMLHttpRequest alternative.")
            };
            
            InstallFunction(server, 'AddSerie');
            InstallFunction(server, 'RemoveSerie');
            InstallFunction(server, 'UpdateTodayEpisodes');
            InstallFunction(server, 'ObtainCalendarBySerie');
            InstallFunction(server, 'CheckNextEpisode');
            InstallFunction(server, 'SelectByDate');
            InstallFunction(server, 'SendBugReportMail');
            InstallFunction(server, 'SavePreferences');
            InstallFunction(server, 'ObtainDownloads');
            InstallFunction(server, 'ValidateDate');
        </script>
        <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-4650617-13']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
		
		<script type="text/javascript">
			$(function(){
				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	
				// Datepicker
				$('#datepicker').datepicker({
                    onSelect: function(dateText, inst) { selectCalendar(dateText); }
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
                
                $('#dialogSeries').dialog({
                    autoOpen: false,
                    height: 400,
                    width: 580
                });
			});
            
            $("#addText").live("keyup", function(event){
                if(event.keyCode == 13){
                    addSerie();
                }
            });
            
            //After Load Page
            $(document).ready(function() {
                server.ObtainDownloads('', completeDownloadsData);
                date = new Date();
                server.ValidateDate(date.getDate(), date.getMonth(), date.getFullYear(), loadTable);
            });
		</script>
        <script type="text/javascript">
            $(function() {
                $("#dialog").dialog("destroy");                
                
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        'Bug Report': function() {
                            var textReport = $("#textBug").val();
                            sendBugReport(textReport);
                            $(this).dialog('close');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    },
                    close: function() {
                        allFields.val('').removeClass('ui-state-error');
                    }
                });
                
                $('#report')
                    .button()
                    .click(function() {
                        $("#textBug").val("");
                        $('#dialog-form').dialog('open');
                    });
            });
            </script>
		
	    <script type="text/javascript">
	        $(function() {
		        $("#selectable").selectable({
                    stop: function(){
                        val = $(".ui-selected").text();
                        obtainSerieInfo(val);
                    }
                });
	        });
	    </script>
	</head>
	<body>
	    <p id="user"><a id="dialog_link" class="ui-state-default ui-corner-all" href="{{ logout_url }}"><span class="ui-icon ui-icon-power"></span>
            <b>{{ current_user }} - Logout</b>
        </a></p>
	
	    <div id="title">
            <div id="tagline">PyTv! - {Beta}</div>
	    </div>
        
        <div id="menu">
            <!-- Accordion -->
            <h2 class="demoHeaders">Menu</h2>
            <div id="accordion">
                <div>
                    <h3><a href="#">Add Serie</a></h3>
                    <div id="content">
                        Type the Name of a Tv Serie to Follow:
                        <p></p>
                        <div class="rowElem"><label>Serie:</label><input type="text" id="addText"/></div>
                        <p id="accordionButton">
                        <a href="javascript:addSerie()" id="dialog_link" class="ui-state-default ui-corner-all">
                        <span class="ui-icon ui-icon-plusthick"></span>Save</a>
                        </p>
                    </div>
                </div>
                <div>
                    <h3><a href="#">Remove Serie</a></h3>
                    <div id="content">
                        Select the Name of a Tv Serie to Remove:
                        <p></p>
                        <div class="rowElem"><label>Serie:</label>
                            <select id="comboRemove"/>
                                {% for serie in series %}
                                    <option value="{{ serie }}">{{ serie }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <p id="accordionButton">
                        <a href="javascript:removeSerie()" id="dialog_link" class="ui-state-default ui-corner-all">
                        <span class="ui-icon ui-icon-minusthick"></span>Remove</a>
                        </p>
                    </div>
                </div>
                <div>
                    <h3><a href="#">Today Episodes</a></h3>
                    <div id="content">
                        <ul class="today">
                            {% for serie in today %}
                                <li>
                                {{ serie.serie }} - {{ serie.season }}x{{ serie.nroEp }}: {{ serie.episode }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div>
                    <h3><a href="#">Next Episode From</a></h3>
                    <div id="content">
                        Select a Serie to check for the Next Episode:
                        <p></p>
                        <div class="rowElem"><label>Serie:</label>
                            <select onChange="javascript:checkNextEpisode()" id="comboNextEpisode"/>
                                {% for serie in series %}
                                    <option value="{{ serie }}">{{ serie }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <p id="nextEpisodeInfo"></p>
                    </div>
                </div>
                <div>
                    <h3><a href="#">Plugins</a></h3>
                    <div>Not Supported Yet.</div>
                </div>
                <div>
                    <h3><a href="#">About PyTv</a></h3>
                    <div id="content">
                        <p><a href="http://www.youtube.com/watch?v=MdzqJl3EVyw">PyTv Overview Video</a></p>
                        <p><b>Developed by:</b> Diego Sarmentero</p>
                        <p><b>Source Code at:</b> <a href="http://pytv-series.googlecode.com/">http://pytv-series.googlecode.com/</a></p>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="panel">
            <!-- Tabs -->
            <h2 class="demoHeaders">Info:</h2>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Following</a></li>
                    <li><a href="#tabs-2">Calendar</a></li>
                    <li><a href="#tabs-3">Download Episodes</a></li>
                    <li><a href="#tabs-4">Preferences</a></li>
                </ul>
                <div id="tabs-1">
                    {% if series %}
                        <p id="tabFollow">Click on a Serie to see the Complete Airdate Calendar's:</p>
                    {% else %}
                        <p id="tabFollow">No Series are being followed currently.</p>
                    {% endif %}
                    <div>
                        <ol id="selectable">
                            {% for serie in series %}
                                <li class='ui-widget-content'><a href="#">{{ serie }}</a></li>
                            {% endfor %}
                        </ol>
                    </div>
                </div>
                <div id="tabs-2">
                <p>Click on a Date to see the info about the Series released that day:</p>
                <div id="datepicker"></div>
                </div>
                <div id="tabs-3">
                    <p id="downloads">Download Links are loaded the day after the episodes are released.</p>
                </div>
                <div id="tabs-4">
                    Set your Configuration and press "Save"
                    <form>
                        {% if notify %}
                        <p><input type="checkbox" id="notify" value="Notification" {{notify}}>Send e-mail Notification with the episodes of the day.</input></p>
                        {% endif %}
                        <p>Please select the source of the download:</p>
                        {% if direct %}
                        <input type="radio" name="radDown" value="torrents">Torrents</input>
                        <input type="radio" id="downloadFrom" name="radDown" value="direct" checked>Direct Download</input>
                        {% else %}
                        <input type="radio" name="radDown" value="torrents" checked>Torrents</input>
                        <input type="radio" id="downloadFrom" name="radDown" value="direct">Direct Download</input>
                        {% endif %}
                        <p><i>(From and Format only supported for Direct Download)</i></p>
                        <p>
                        From: 
                            <select id="comboFrom"/>
                                <option value="All">All</option>
                                <option value="Megaupload">Megaupload</option>
                                <option value="Rapidshare">Rapidshare</option>
                                <option value="Hotfile">Hotfile</option>
                                <option value="Mediafire">Mediafire</option>
                            </select>
                        </p>
                        <p>
                        Format: 
                            <select id="comboFormat"/>
                                <option value="All">All</option>
                                <option value="rar">rar</option>
                                <option value="avi">avi</option>
                                <option value="rmvb">rmvb</option>
                                <option value="mpg">mpeg</option>
                                <option value="mkv">mkv</option>
                            </select>
                        </p>
                        <br/>
                        <p>
                            <a href="/design" id="dialog_link" class="ui-state-default ui-corner-all">
                            <span class="ui-icon ui-icon-image"></span>Configure Design</a>
                        </p>
                        <br/>
                        <p>
                            <a href="javascript:savePreferences()" id="dialog_link" class="ui-state-default ui-corner-all">
                            <span class="ui-icon ui-icon-plusthick"></span>Save</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
        
        <div id="table">
            <h2 class="demoHeaders">Series Info:</h2>
            <table>
                  <thead>
                      <tr>
                          <th>Serie</th>
                          <th>Season</th>
                          <th>Nro-Ep</th>
                          <th>Episode</th>
                          <th>Date</th>
                      </tr>
                  </thead>
                  <tbody id="tableBody">
                    {% for cal in today %}
                    <tr> 
                      <td> 
                        {{ cal.serie }}
                      </td>
                      <td> 
                        {{ cal.season }}
                      </td>
                      <td> 
                        {{ cal.nroEp }}
                      </td>
                      <td> 
                        {{ cal.episode }}
                      </td>
                      <td> 
                        {{ cal.date }}
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
            </div>

        <div id="notification" class="jGrowl bottom-right"></div>
        <div id="dialogSeries" title="Calendar (Click here to Move)">
            <div id="tableDialog">
                <table>
                  <thead>
                      <tr>
                          <th>Serie</th>
                          <th>Season</th>
                          <th>Nro-Ep</th>
                          <th>Episode</th>
                          <th>Date</th>
                      </tr>
                  </thead>
                  <tbody id="tableBodyDialog">
                  </tbody>
                </table>
            </div>
        </div>
		
        <p id="developer">Developed by: Diego Sarmentero</p>
        <button id="report">Report a Bug</button>
        
        <div id="dialog-form" title="Bug Report">
            <form>
            <fieldset>
                <textarea id="textBug" name="problem" class="text ui-widget-content ui-corner-all" rows="11" cols="40"></textarea>
            </fieldset>
            </form>
        </div>
		
	</body>
</html>


